window.onload=function () {
        var can=document.getElementById("myCan");
        var btn=document.getElementById("btn");
        var returnImg=document.getElementById("returnImg");
        var ctx=can.getContext("2d");

        $('#imgFile').change(function () {
           var file=$('#imgFile')[0].files[0];
            var reader=new FileReader();
            reader.onload= function (e) {
                $('#demoImg').attr('src', e.target.result);
            };
            reader.readAsDataURL(file);
        });
        $('#chooseBox').mousedown(function (e) {
            var originX= e.offsetX;
            var originY= e.offsetY;
            //设置裁剪框在图片内的范围
            window.onmousemove=function (e) {
                $('#chooseBox').css({
                    position:'absolute',
                    left:e.clientX-originX-300+'px',
                    top: e.clientY-originY+'px'
                });
                if($('#chooseBox').position().left<=0){
                    $('#chooseBox').css({
                        left:0
                    });
                }
                if($('#chooseBox').position().left>=150){
                    $('#chooseBox').css({
                        left:'149px'
                    });
                }
                if($('#chooseBox').position().top<=0){
                    $('#chooseBox').css({
                        top:0
                    });
                }
                if($('#chooseBox').position().top>=150){
                    $('#chooseBox').css({
                        top:'149px'
                    });
                }
                $('#chooseBox').mouseout(function () {
                    window.onmousemove=null;
                    return
                })
            };
            window.onmouseup= function () {
                window.onmousemove=null;
                return
            }
        });
        //绘制到右侧画布上
        $('#cut').click(function () {
            var newX=$('#chooseBox').position().left*3.45;
            var newY=$('#chooseBox').position().top*2.6;
            var img=document.getElementById("demoImg");
            console.log(newX,newY);
            ctx.drawImage(img,newX,newY,150*3.45,150*2.6,0,0,150,150);
            img.style.border="1px soild black";
        });
        
        //与服务器发送请求
        btn.onclick=function () {
            var data=can.toDataURL();
            data=data.split(',')[1];
            data=window.atob(data);
            var ia = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                ia[i] = data.charCodeAt(i);
            }
            var blob=new Blob([ia],{type:"image/png",endings:'transparent'});
            var fd=new FormData();
            console.log(blob);
            fd.append('avatarFile',blob,'image.png');
            var httprequest=new XMLHttpRequest();
            httprequest.open('POST','/guest/avatar',true);
            httprequest.send(fd);
            httprequest.onreadystatechange= function () {
                if(httprequest.status==200 && httprequest.readyState==4){
                    console.log(httprequest.responseText);
                    $('#returnImg').attr('src','/images/'+JSON.parse(httprequest.responseText).json);
                }
            };
        };
    }